<template>
	<view class="page-view">
		<!-- #ifdef MP-WEIXIN  -->

		<official-account></official-account>
		<!-- #endif -->
		<view class="u-p-10" v-if="topBanner.length">
			<u-swiper :list="topBanner" :interval="topsecond" @click="handleTopswiperUrl($event)" height="300" mode="round"
				indicator-pos="topRight" img-mode="aspectFill">
			</u-swiper>
		</view>
		<view class="u-flex u-p-20">
			<view class="u-w-236 u-h-60 u-l-h-60 u-text-center u-b-r-20 u-font-28" v-for="(item,index) in lifeList"
				:key="index" @click="lifeClick(item)" :class="lifeType==item.type?'bg_FC3533FF cl_FFF':'bg_666666'">
				{{item.name}}
			</view>
			<view class="u-w-236 u-h-60 u-l-h-60 u-text-center u-b-r-20 u-font-28 bg_666666" @click="lifeClick1">
				更多代缴费 >
			</view>
		</view>


		<view class="one1">
			<view class="u-p-l-20 u-p-r-20 u-b-r-20 bg_FFFFFF">
				<view v-show="lifeType==1" class="">
					<view class="" style="border-bottom: 1rpx solid #E2E2E2;display: flex;align-items: center;">
						<!-- :disabled="lifeType==1?true:false" -->
						<u-input v-model="phone" type='number' placeholder='绑定充值手机号码' style="flex:1" />
						<u-button type="primary" size="mini" @click="handlePastePhone">粘贴</u-button>
					</view>
					<view v-if="checkPhone" class="error">{{ checkPhone }}</view>
					<view class="u-flex" v-if="operatorStatus">
						<text>运营商：</text>
						<u-radio-group v-model="mobile_type">
							<u-radio name="1">移动</u-radio>
							<u-radio name="2">联通</u-radio>
							<u-radio name="3">电信</u-radio>
							<u-radio name="4">携号转网</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view v-show="lifeType==2" class="u-font-28">
					<view class="" style="display: flex;align-items: center;padding-left: 10px;">
						<u-input v-model="gas_no" placeholder='请输入燃气号' style="flex:1"></u-input>
						<u-button type="primary" size="mini" @click="handlePasteGas">粘贴</u-button>
					</view>
					<view class="" style="border-bottom: 1rpx solid #E2E2E2;">
						<u-cell-group>
							<u-cell-item @click="show1=true" title="燃气公司" :value="companyName||'请选择'"></u-cell-item>
						</u-cell-group>
					</view>
				</view>
				<view v-show="lifeType==3" class="u-font-28">
					<view class="u-flex " style="border-bottom: 1rpx solid #E2E2E2;">
						<view class="u-m-l-30 u-w-300" style="display: flex;align-items: center;">
							<u-input v-model="elec_name" placeholder='请输入户名' style="flex:1"></u-input>
							<u-button type="primary" size="mini" @click="handlePasteElecName">粘贴</u-button>
						</view>
						<view class="u-m-l-30 u-w-300" style="display: flex;align-items: center;">
							<u-input v-model="elec_no" type="number" placeholder='请输入电费号' style="flex:1"></u-input>
							<u-button type="primary" size="mini" @click="handlePasteElecNo">粘贴</u-button>
						</view>
					</view>
					<view class="u-m-l-30 u-w-400 ad" style="position: relative;" @click="handleSetcityShow">
						<!-- <view>12331</view> -->
						<view class="uni-input-input" style="height: 35px;line-height: 35px;color: #303133;font-size: 28rpx;"
							v-if="area_name">
							{{area_name||'请选择省份'}}
						</view>
						<view class="uni-input-input"
							style="height: 35px;line-height: 35px;font-size: 28rpx;color: rgb(156 161 173);" v-else>
							{{area_name||'请选择省份'}}
						</view>
						<!-- <u-input v-model="area_name" disabled placeholder='请选择省份' ></u-input> -->
						<!-- <view style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1000;" ></view> -->
					</view>
				</view>
			</view>
			<view class="u-p-20 u-m-t-20 u-b-r-20 bg_FFFFFF">
				<view class="u-flex u-row-between">
					<view class="u-weight">选择充值金额</view>
					<view class="u-font-32 u-weight u-text-right"
						@click="$u.route(`/subcontract/Rechargemoney2/massage2/massage2?type=${lifeType}`)">
						充值记录 <u-icon class="u-m-l-5" name="arrow-right"></u-icon>
					</view>
					<!-- <view class="u-flex"  @click="show=true">
						<view class="u-h-30 ">
							<u-image src='https://www.sqkjkj.vip/wxImg/rechargemoney/img1.png' width='25rpx' height='25rpx'></u-image>
						</view>
						<view class="u-font-20 u-m-l-10 u-m-t-10" style="color: #FB473C;">充值须知</view>
					</view> -->
				</view>
				<view class="u-m-t-20">
					<u-row>
						<u-col span='4' v-for="(item,index) in list " :key="index">
							<view class="u-m-t-20 u-text-center custom-choose" @click="choes(item)"
								:class="num==item.id?'choes':'choes1'">
								<view class="">
									{{item.total_money}}元
								</view>
								<view class="current">
									¥{{dcScoreList.pay_money}}+{{dcScoreList.deduct_amount}}抵扣金
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="u-m-t-20 cl_FB473CFF u-font-28">
					需要扣除{{dcScoreList.pay_money||''}}钱，消耗{{dcScoreList.deduct_amount||''}}抵扣金
				</view>
				<view class="u-m-t-20 u-font-28 u-text-right" style="color: #2979ff;">

					<u-button type="primary" size="mini" @click="$u.route('/subcontract/dikoujinCZ/dikoujinCZ')">抵扣金购买</u-button>
				</view>
				<view class="u-m-t-20 cl_898989FF u-font-28 u-text-right">抵扣金<text
						class="cl_FB473CFF">￥{{dcScoreList.deduct||''}}</text></view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class=" one1 u-p-t-20">
			<view class="u-flex-col u-col-center">- 支付方式 -</view>
		</view>
		<!-- 支付类型 -->
		<view class="one1 u-p-30">
			<view class="bg_FFFFFF u-b-r-20">
				<view @click="hadnleDepositPays" class="u-flex u-row-between u-p-30"
					style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="u-flex">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 u-weight">钱包支付</view>
						</view>
						<view class="u-m-l-30">
							<view class=" cl_898989FF u-font-24">余额<text class="cl_FB473CFF">￥{{userinfo.user_wallet}}</text></view>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='deposit'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>

				<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 u-weight">易支付</view>
						</view>

					</view>
					<view class="u-flex">
						<!-- <view class="u-m-r-20 cl_FB473CFF">-￥{{userinfo.goods_amount}}</view> -->
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays == 'epay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>
				<view style="color: #afacac;font-size: 26rpx;padding: 14rpx;">请添加平台客服转账充值钱包</view>
				<!-- #ifdef APP || MP-WEIXIN -->
				<view v-if="showWechatPay && is_wechat_switch == 1" @click="pays='wechat'" class="u-flex u-row-between u-p-30"
					style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 u-weight">微信支付</view>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='wechat'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5  -->
				<view @click="pays='alipay'" v-if="userinfo.alipay_switch==1" class="u-flex u-row-between u-p-30"
					style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 u-weight">支付宝支付</view>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='alipay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS  || MP-ALIPAY -->
				<view @click="pays='alipay'" v-if="userinfo.alipay_switch==1" class="u-flex u-row-between u-p-30"
					style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 u-weight">支付宝支付</view>
						</view>

					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='alipay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="u-h-20">

		</view>
		<view class="swiper-box" v-if="leftBanner.length||rightUpBanner.length||rightDownBanner.length">
			<view class="swiper-left">
				<u-swiper :list="leftBanner" :interval="leftBsecond" @click="handleLeftswiperUrl($event)" height="430"
					mode="round" indicator-pos="topRight" img-mode="aspectFill">
				</u-swiper>
			</view>
			<view class="swiper-right">
				<view class="swiper-right-top">
					<u-swiper :list="rightUpBanner" :interval="rightUsecond" @click="handleRtswiperUrl($event)" height="210"
						mode="round" indicator-pos="topRight" img-mode="aspectFill">
					</u-swiper>
				</view>
				<view class="swiper-right-botoom">
					<u-swiper :list="rightDownBanner" :interval="rightDsecond" @click="handleRBswiperUrl($event)" height="210"
						mode="round" indicator-pos="topRight" img-mode="aspectFill">
					</u-swiper>
				</view>
			</view>
		</view>
		<view class="u-p-10">
			<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>

		</view>
		<view class="u-h-20">

		</view>
		<!-- <view class="u-p-50"></view> -->

		<!-- 充值须知 -->
		<u-popup v-model="show" mode='center'>
			<view class="u-rela u-p-50 u-w-700 ">
				<view class="u-font-50 u-weight">充值须知</view>

				<view class="u-fix u-r-60 u-t-300">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/sign/heart.png" mode="aspectFill" width="216rpx"
						height='274rpx'>
					</u-image>
				</view>
				<view class="u-m-t-20">
					<u-parse
						:html="lifeType==1?userinfo.recharge_note:lifeType==2?conf.gas_charge_remark:conf.elec_charge_remark"></u-parse>
				</view>
				<view @click="show=false"
					class="u-m-t-20 u-w-400 u-h-92 u-l-h-92 u-font-30 u-text-center u-auto cl_FFF u-b-r-20"
					style="background-color: #FC3533FF;">我知道了</view>

			</view>

		</u-popup>
		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200" v-if="shows">
				<u-message-input :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>
		<u-select v-model="cityShow" mode="mutil-column-auto" child-name="child" value-name="id" label-name="area_name"
			:list="address_list" @confirm="cityFirm"></u-select>
		<!-- </view> -->
		<view class="u-fix u-b-0 bg_FFFFFF u-p-20 u-w-750" style="z-index: 1000;">
			<view class="u-w-700 u-auto u-h-80 u-l-h-80 u-text-center u-b-r-13 cl_FFF">
				<u-checkbox v-model="confirmed">我已阅读充值说明</u-checkbox>
			</view>
			<view class="u-w-700 u-auto u-h-80 u-l-h-80 u-text-center u-b-r-13 cl_FFF"
				style="background: linear-gradient(-64deg, #FF382C, #FF633F);" @click="save">提交</view>
		</view>
		<view class=" u-w-750 bg_FFFFFF" style="padding: 20rpx 20rpx 100rpx 20rpx;">
			<view class="" style="overflow-x: hidden;">
				<u-parse
					:html="lifeType==1?userinfo.recharge_note2:lifeType==2?conf.gas_charge_remark2:conf.elec_charge_remark2"></u-parse>
			</view>


		</view>
		<!-- #ifdef MP-WEIXIN-->
		<button class="kf-box" open-type="contact" style="position: fixed;top: 50vh;right: 10rpx;z-index: 1000;">
			<u-icon name="weixin-fill" color="#07c160" size="98"></u-icon>
		</button>

		<view class="" style="margin: 10px;">
			<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>
		</view>
		<!-- #endif -->

		<!-- #ifdef APP-ANDROID || H5 -->
		<view class="" style="height: 200px;" v-if="buttomAdInfo">
			<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>
		</view>

		<view class="kf-box" @click="handleKf" style="position: fixed;top: 50vh;right: 10rpx;">
			<u-icon name="weixin-fill" color="#07c160" size="98"></u-icon>
		</view>
		<!-- #endif -->

		<u-toast ref="uToast" />
		<custom-modal v-model="modalShow" :info="modalInfo" @onCancel="handleCancel" @onConfirm="customUrl" />
		<u-select v-model="show1" :list="companyList" @confirm="handleGetCompany"></u-select>
		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': params.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<!-- 在微信小程序环境下不显示支付宝支付选项 -->
					<view class="epay-payment-option" @click="selectEpayMethod('alipay')" v-if="!isWechatMP">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': params.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import CustomModal from '../../pages/home/custom-modal.vue'

export default {
	components: {
		CustomModal
	},
	data() {
		return {
			show1: false,
			modalShow: false,
			modalInfo: {},
			phone: "",
			mobile_type: '', // 运营商
			mobile: '',
			// 选择充值金额
			num: '',
			// 充值须知弹窗
			show: false,
			// 充值方式
			pays: 'wechat',
			// 可用积分
			pays1: "",
			// 充值选项
			list: [],
			// 充值金额
			pay_money: 0,
			userinfo: '',
			shows: false,
			pays_list: '',
			dcScoreList: '',
			lifeType: '1',
			lifeList: [],
			gas_no: '', //燃气号
			elec_no: '', //户号
			elec_name: '', // 户名
			cityShow: false,
			address_list: [],
			area_name: '', //区域
			area_id: '', //区域
			conf: [],
			confirmed: false,
			innerAudioContext: null,
			gas_company: '',
			companyName: '',
			companyList: [],
			buttomAdInfo: null,
			topBanner: [],
			topsecond: 1000,
			leftBanner: [],
			leftBsecond: 1000,
			rightUpBanner: [],
			rightUsecond: 1000,
			rightDownBanner: [],
			rightDsecond: 1000,
			operatorStatus: true,
			noticeList: [],
			showWechatPay: true,
			showEpayDialog: false,
			params: {
				epay_type: 'wxpay',
				method: '',
			},
			massage_pay: '', // 用于存储支付相关信息
			isWechatMP: false, // 新增的WeChat Mini Program判断
			is_wechat_switch: '1',
		}
	},
	computed: {
		checkPhone() {
			const reg = new RegExp(/^1\d{10}$/)
			if (!this.phone) {
				return '请填写手机号码'
			}
			if (!reg.test(this.phone)) {
				return '手机号码错误'
			}
			return false
		}
	},
	onLoad(options) {
		// this.innerAudioContext = uni.createInnerAudioContext();
		// this.innerAudioContext.obeyMuteSwitch = false
		// this.innerAudioContext.autoplay = true;
		// this.innerAudioContext.src = 'https://img.sqkjkj.vip/uploads/files/20231103/5f8d59e6cbb564d5e3dca5aefd8a914f';
		const lifeType = options?.lifeType
		if (lifeType) {
			this.initQuery(options)
		}
		this.getRechargeBanner()
		this.apply_join()
		this.lifeRechargeType()
		this.detectDeviceType()

		this.$api.get_my_massage({}, (res) => {
			this.userinfo = res.data.data.data
			// #ifdef MP-WEIXIN
			this.is_wechat_switch = this.userinfo.mini_wechat_switch
			// #endif
			// #ifdef H5
			this.is_wechat_switch = this.userinfo.h5_wechat_switch
			// #endif
			// #ifdef APP-PLUS
			this.is_wechat_switch = this.userinfo.app_wechat_switch
			// #endif
			if (!lifeType) {
				this.conf = uni.getStorageSync("conf")
				this.mobile = this.userinfo.mobile
				this.phone = this.userinfo.mobile
			}
		})

		// console.log(this.userinfo)



		this.lifeBackgroundMusic()
		if (uni.getStorageSync('token')) {
			this.getModal()
			this.getGasCompany()
			this.getButtomAd()
		}
		this.operatorsSwitch()
		this.wechatPaySwitch()
		this.getbanner()



	},
	onHide() {
		this.innerAudioContext.stop()
		this.isHide = true
	},
	onUnload() {
		this.innerAudioContext.stop()
	},
	onShow() {
		if (this.isHide) return
		if (uni.getStorageSync('gas_no')) {
			this.gas_no = uni.getStorageSync('gas_no')
		}
		if (uni.getStorageSync('elec_no')) {
			this.elec_no = uni.getStorageSync('elec_no')
		}
	},
	methods: {
		lifeBackgroundMusic() {
			this.$api.lifeBackgroundMusic({}, res => {
				if (res.data.code === 1) {
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.obeyMuteSwitch = false
					this.innerAudioContext.src = res.data.data
					this.innerAudioContext.play()
				}

			})
		},
		wechatPaySwitch() {
			// this.$api.wechatPaySwitch({}, (res) => {

			// 	// #ifdef MP-WEIXIN
			// 	if (res.data.data.mini != 1) {
			// 		this.pays = 'deposit'
			// 		this.showWechatPay = false
			// 	}
			// 	//  #endif
			// 	// #ifdef APP-PLUS
			// 	if (res.data.data.mini != 1) {
			// 		this.pays = 'alipay'
			// 		this.showWechatPay = false
			// 	}
			// 	// #endif
			// 	// #ifdef H5
			// 	if (res.data.data.mini != 1) {
			// 		this.pays = 'deposit'
			// 	}
			// 	// #endif
			// })
		},
		hadnleDepositPays() {
			this.pays = 'deposit'
			if (this.userinfo.user_wallet == '0.00') {
				uni.showModal({
					title: '提示',
					content: '您的余额不足请前往我的钱包充值后再提交',
					cancelText: '取消',
					confirmText: '去充值',
					success: (s) => {
						if (!s.confirm) return
						if (this.userinfo.new_charge_button == 1) {

							this.$u.route(`/subcontract/Recharge/Recharge2`)
						} else {
							this.$u.route(`/subcontract/Recharge/Recharge`)
						}

					}
				})
			}

		},
		handleKf() {
			uni.showModal({
				title: '提示',
				content: '请复制微信客服账号',
				cancelText: '取消',
				confirmText: '复制',
				success: (s) => {
					let url = ''
					if (s.confirm) {
						this.$api.getServiceCode({}, (res) => {
							uni.setClipboardData({
								data: res.data.data.service_code
							})
						})

					}

				}
			})

		},
		getbanner() {
			this.$api.getliveBanner({}, (res) => {
				this.noticeList = res.data.data.notice.map(i => i.content)

			})
		},
		operatorsSwitch() {
			this.$api.operatorsSwitch({}, res => {
				this.operatorStatus = res.data.data.switch == '1'
			})
		},
		handleTopswiperUrl(index) {
			console.log(index)
			this.customUrl(this.topBanner[index])
		},
		handleLeftswiperUrl(index) {
			this.customUrl(this.leftBanner[index])
		},
		handleRtswiperUrl(index) {
			this.customUrl(this.rightUpBanner[index])
		},
		handleRBswiperUrl(index) {
			this.customUrl(this.rightDownBanner[index])
		},
		getRechargeBanner() {
			this.$api.getRechargeBanner({}, res => {
				if (!res.data.data) {
					return
				}
				res.data.data.top.data.forEach(img => {
					img.image = img.pic
				})
				res.data.data.right_down.data.forEach(img => {
					img.image = img.pic
				})
				res.data.data.right_up.data.forEach(img => {
					img.image = img.pic
				})
				res.data.data.left.data.forEach(img => {
					img.image = img.pic
				})



				this.topBanner = res.data.data.top.data;
				this.topsecond = res.data.data.top.second * 1000

				this.leftBanner = res.data.data.left.data
				this.leftBsecond = res.data.data.left.second * 1000

				this.rightUpBanner = res.data.data.right_up.data
				this.rightUsecond = res.data.data.right_up.second * 1000

				this.rightDownBanner = res.data.data.right_down.data
				this.rightDsecond = res.data.data.right_down.second * 1000
			})
		},
		handleSetcityShow() {
			this.cityShow = true
			// console.log(12312)
		},
		getButtomAd() {
			this.$api.getAd({
				pos: 'score_shop'
			}, res => {
				// console.log(res)
				this.buttomAdInfo = res.data.data
			})
		},
		initQuery(query) {
			const lifeType = query.lifeType
			this.confirmed = true
			this.pays = 'wechat'
			switch (lifeType) {
				case '1':
					this.lifeType = 1
					this.phone = query.mobile
					this.mobile_type = query.mobile_type
					break;
				case '2':
					this.lifeType = 2
					this.gas_no = query.gas_no
					this.gas_company = Number(query.gas_company)
					break;
				case '3':
					this.lifeType = 3
					this.elec_name = query.elec_name
					this.elec_no = query.elec_no
					this.area_id = Number(query.area_id)
					this.area_name = query.area_name
					break;
				default:
					this.lifeType = 1
					this.phone = query.mobile
					this.mobile_type = query.mobile_type
					break;
			}
		},
		getGasCompany() {
			this.$api.getGasCompany({}, (res) => {
				this.companyList = res.data.data.map((item) => ({
					value: item.id,
					label: item.name
				}))
				if (this.gas_company) {
					this.companyName = this.companyList.filter((i) => i.value === this.gas_company)[0].label
				}
			})
		},
		handleGetCompany(val) {
			this.companyName = val[0].label;
			this.gas_company = val[0].value;
		},
		handlePastePhone() {
			uni.getClipboardData({
				success: (res) => {
					this.phone = res.data
				}
			})
		},
		handlePasteGas() {
			uni.getClipboardData({
				success: (res) => {
					this.gas_no = res.data
				}
			})
		},
		handlePasteElecName() {
			uni.getClipboardData({
				success: (res) => {
					this.elec_name = res.data
				}
			})
		},
		handlePasteElecNo() {
			uni.getClipboardData({
				success: (res) => {
					this.elec_no = res.data
				}
			})
		},
		handleCancel() {
			this.modalShow = false
		},
		getModal() {
			this.$api.getWindow({
				type: 2
			}, (res) => {
				if (Object.keys(res.data.data).length) {
					this.modalInfo = res.data.data
					this.modalShow = true
				}
			})
		},
		customUrl(c) {
			if (c.url_type == 'goods_detail') {
				this.$u.route(`/pages/home/paymassage?num=${c.params.spu}`)
			} else if (c.url_type == 'goods_list') {
				this.$u.route({
					type: 'switchTab',
					url: '/pages/home/home'
				})
			} else if (c.url_type == 'shop_detail') {
				this.$u.route(`/pages/shopmassage/shopmassage?num=${c.params.shop_id}`)
			} else if (c.url_type == 'announce_detail') {
				this.$u.route(`/subcontract/mymassage/systemMessages/detail?announce_id=${c.params.announce_id}`)
			}
		},
		// 省份列表
		apply_join() {
			this.$api.apply_join({
				level: "2"
			}, res => {
				this.address_list = res.data.data
			})
		},
		cityFirm(e) {
			this.area_name = `${e[0].label}${e[1].label}`
			this.area_id = e[1].value
		},
		confirm(e) {
			this.area = `${e[0].label}${e[1].label}${e[2].label}`
			this.address_id = e[2].value
		},
		backs() {
			uni.navigateBack()
		},
		lifeRechargeType() {
			this.$api.lifeRechargeType2({}, res => {
				if (res.data.code == 1) {
					this.lifeList = res.data.data
					this.massage()
				}
			})
		},
		lifeClick(item) {
			this.lifeType = item.type
			this.massage()
		},
		lifeClick1() {
			// this.$u.route(
			// 	'/subcontract/Rechargemoney3/Rechargemoney3')
			this.$api.getHolding({}, res => {
				if (res.data.code == 1) {

				}
			})
			this.$u.route(
				'/subcontract/Rechargemoney3/Rechargemoney3?is_wechat_switch=' + this.is_wechat_switch + '&is_alipay_switch=' + this.userinfo.alipay_switch)
		},
		massage() {
			this.num = ''
			this.$api.choes_my_phone2({
				type: this.lifeType,
				is_new: 0
			}, res => {
				if (res.data.code == 1) {
					this.list = res.data.data.money_list
					if (this.list.length > 0) {
						this.num = this.list[0].id
						this.getDcScore()
					}
				}
			})
		},
		getDcScore() {
			this.$api.getDcScore2({
				type: this.lifeType,
				recharge_money_id: this.num,
				is_new: 0
			}, res => {
				if (res.data.code == 1) {
					this.dcScoreList = res.data.data
				}
			})
		},
		choes(item) {
			this.num = item.id
			this.pay_money = item.pay_money
			this.getDcScore()
		},
		save() {
			console.log(this.num)
			if (!this.confirmed) {
				uni.showToast({
					icon: 'none',
					title: '请阅读充值说明'
				})
				return
			}
			if (this.num == 0 || this.num == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择充值金额'
				})
			} else if (this.pays == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择支付方式'
				})
			} else {
				let params = {}
				if (this.lifeType == 1) {
					if (this.phone == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号'
						})
						return
					}
					if (this.operatorStatus) {
						if (this.mobile_type == '') {
							uni.showToast({
								icon: 'none',
								title: '请选择运营商'
							})
							return
						}
					}

					params = {
						mobile: this.phone,
						mobile_type: this.mobile_type
					}
				}
				if (this.lifeType == 2) {
					if (this.gas_no == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入燃气号'
						})
						return
					}
					if (this.gas_company === '') {
						uni.showToast({
							icon: 'none',
							title: '请选择燃气公司'
						})
						return
					}

					params = {
						gas_no: this.gas_no,
						gas_company: this.gas_company
					}
					uni.setStorageSync('gas_no', this.gas_no)
				}
				if (this.lifeType == 3) {
					if (!this.elec_name) {
						uni.showToast({
							icon: 'none',
							title: '请输入户名'
						})
						return
					}
					if (this.elec_no == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入电费号'
						})
						return
					}
					if (this.area_id == '') {
						uni.showToast({
							icon: 'none',
							title: '请选择省份'
						})
						return
					}
					params = {
						elec_no: this.elec_no,
						elec_name: this.elec_name,
						area_id: this.area_id
					}
					uni.setStorageSync('elec_no', this.elec_no)
				}
				params = Object.assign({
					type: this.lifeType,
					money_id: this.num,
				}, params)

				this.$api.pay_my_phone2(params, res => {
					if (res.data.code == 1) {
						this.pays_list = res.data.data.pay_info
						if (this.pays == 'deposit') {
							// if (uni.getStorageSync('userinfo').have_trade_pwd == 0) {
							// 	uni.showModal({
							// 		title: '提示',
							// 		content: '请先设置余额支付密码',
							// 		success: (res) => {
							// 			if (res.confirm) {
							// 				this.$u.route(
							// 					'/pages/changePayPassword/changePayPassword')
							// 			} else {

							// 			}
							// 		}
							// 	})
							// 	return
							// }

							if (this.userinfo.user_wallet == '0.00') {
								this.hadnleDepositPays()
								// uni.showModal({
								// 	title: '提示',
								// 	content: '您的余额不足请前往我的钱包充值后再提交',
								// 	cancelText: '取消',
								// 	confirmText: '去充值',
								// 	success: (s) => {
								// 		let url = ''
								// 		if (s.confirm) {
								// 			this.$u.route(`/subcontract/Recharge/Recharge`)
								// 		}

								// 	}
								// })
								return
							}
							// this.shows = true
							this.pay()
						}

						if (this.pays == 'epay') {
							this.pay();
							return
						}

						if (this.pays == "wechat" || this.pays == 'alipay') {
							let params = {
								target_id: this.pays_list.target_id,
								target_type: this.pays_list.target_type,
								pay_type: this.pays,
								// #ifdef APP-PLUS
								client: 'APP',
								// #endif
								// #ifdef MP-WEIXIN || MP-ALIPAY
								client: 'JSAPI',
								// #endif
								// #ifdef H5
								client: 'WAP',
								// #endif
								trade_pwd: '',
								random: 1
							}
							// #ifdef APP-PLUS
							this.$com.wxPay2(params, this.pays).then(ok => {
								console.log(ok)
								this.$refs.uToast.show({
									title: ok.data.msg,
									type: 'success',
									callback: cal => {
										// this.$u.route({
										// 	type: 'reLaunch',
										// 	url: '/subcontract/payStatus/payStatus'
										// })
										this.paySucess(ok.data.data.actual_money)
									}
								})
							})
							// #endif
							// #ifdef H5
							this.$com.wxPay2(params, this.pays).then(ok => {
								console.log(ok)
								const div = document.createElement('div');
								div.id = 'alipay';
								div.innerHTML = ok;
								document.body.appendChild(div);
								document.querySelector('#alipay').children[0].submit()

							})
							// #endif
							// #ifdef MP-WEIXIN
							this.$com.weChatPay2(params, this.pays).then(ok => {
								console.log(ok)
								this.$refs.uToast.show({
									title: ok.msg,
									type: 'success',
									callback: cal => {
										// this.$u.route({
										// 	type: 'reLaunch',
										// 	url: '/subcontract/payStatus/payStatus'
										// })
										console.log(ok.data.data.actual_money)
										this.paySucess(ok.data.data.actual_money)
									}
								})
							})
							// #endif

							// #ifdef MP-ALIPAY
							this.$com.aliPay2(params, this.pays).then(ok => {
								console.log(ok)
								this.$refs.uToast.show({
									title: ok.msg,
									type: 'success',
									callback: cal => {
										// this.$u.route({
										// 	type: 'reLaunch',
										// 	url: '/subcontract/payStatus/payStatus'
										// })
										console.log(ok.data.data.actual_money)
										this.paySucess(ok.data.data.actual_money)
									}
								})
							})
							// #endif
						}
					}
				})
			}
		},

		finish(e) {
			console.log('输入结束，当前值为：' + e);
			this.pay(e)
			// this.shows = false
		},
		paySucess(pay_money) {
			let goodsName = ''
			let payType = ''
			if (this.lifeType == 1) {
				goodsName = '充值话费'
			}
			if (this.lifeType == 2) {
				goodsName = '充值燃气费'
			}
			if (this.lifeType == 3) {
				goodsName = '充值电费'
			}
			if (this.pays == 'alipay') {
				payType = '支付宝'
			}
			if (this.pays == 'wechat') {
				payType = '微信'
			}
			if (this.pays == 'deposit') {
				payType = '钱包余额'
			}
			if (this.pays == 'epay') {
				payType = '易支付'
				// uni.navigateTo({
				// 	url: '/pages/webview/webview?url=' + encodeURIComponent(`http://xcx.itcwc.com/subcontract/payStatus/payStatus?goodsName=${goodsName}&payType=${payType}&payMoney=${pay_money}`)
				// });
				// return;
			}
			const payMoney = this.dcScoreList.pay_money
			const base_url = 'http://xcx.itcwc.com/member/#/'

			// #ifdef APP-PLUS
			
				this.$u.route({
					type: 'reLaunch',
					url: `/subcontract/payStatus/payStatus?goodsName=${goodsName}&payType=${payType}&payMoney=${payMoney}`
				})
				// uni.reLaunch({
				// 	url: '/subcontract/payStatus/payStatus?goodsName=aqin&payType=1&payMoney=100'
				// });
			// #endif
			// #ifdef H5
			this.$u.route({
				type: 'reLaunch',
				url: `/subcontract/payStatus/payStatus?goodsName=${goodsName}&payType=${payType}&payMoney=${payMoney}`
			})
			// #endif

		},
		pay(e = '') {
			if (this.pays == 'epay') {
				// 易支付
				let params = {
					target_id: this.pays_list.target_id,
					target_type: this.pays_list.target_type,
					pay_type: this.pays,
					// 如果是微信小程序，强制使用微信支付
					type: this.isWechatMP ? 'wxpay' : this.params.epay_type,
					method: this.params.method,
					client: 'APP',
					trade_pwd: e,
					random: 1,
					// 根据不同平台设置不同的client参数
					// #ifdef APP-PLUS
					client: 'APP',
					// #endif
					// #ifdef MP-WEIXIN || MP-ALIPAY
					client: 'JSAPI',
					// #endif
					// #ifdef H5
					client: 'WAP',
					// #endif
				}
				this.$com.easyPay(params, this.pays);
			} else {
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				this.$api.go_pay2({
					target_id: this.pays_list.target_id,
					target_type: this.pays_list.target_type,
					pay_type: this.pays,
					client: 'APP',
					trade_pwd: e,
					random: 1
				}, res => {
					uni.hideLoading();
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '充值成功'
						})
						console.log(res.data.data.actual_money)
						setTimeout(() => {
							// uni.navigateBack()
							// this.$u.route({
							// 	type: 'reLaunch',
							// 	url: '/subcontract/payStatus/payStatus'
							// })
							this.paySucess(res.data.data.actual_money)
						}, 500)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						if (res.data.msg == '钱包余额不足') {
							uni.showModal({
								title: '提示',
								content: '您的余额不足请前往我的钱包充值后再提交',
								cancelText: '取消',
								confirmText: '去充值',
								success: (s) => {
									if (!s.confirm) return
									if (this.userinfo.new_charge_button == 1) {

										this.$u.route(`/subcontract/Recharge/Recharge2`)
									} else {
										this.$u.route(`/subcontract/Recharge/Recharge`)
									}

								}
							})
						}

					}
				})
			}

		},

		// 调取微信
		wxpay(obj) {
			uni.showToast({
				icon: 'none',
				title: '暂时仅支持余额'
			})
		},
		selectEpayMethod(method) {
			this.params.epay_type = method
			this.showEpayDialog = false
		},
		confirmEpayMethod() {
			this.showEpayDialog = false
		},
		openEpayDialog() {
			this.pays = 'epay'
			this.showEpayDialog = true
		},
		detectDeviceType() {
			// #ifdef H5
			this.params.method = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.params.method = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.params.method = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.params.method = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('当前设备类型:', this.params.method)
			console.log('是否为微信小程序:', this.isWechatMP)
		},
	}
}
</script>

<style scoped lang="scss">
.page-view {
	padding-bottom: 200rpx;
}

page {
	background-color: #f5f5f5;
}

.one1 {
	background-color: #f5f5f5;

	.error {
		font-size: 24rpx;
		color: red;
	}
}

.kf-box {
	background-color: transparent;
}

.kf-box::after {
	display: none;
}

.swiper-box {
	padding: 30rpx;
	height: 500rpx;
	// background-color: red;
	display: flex;
	justify-content: space-between;

	.swiper-left {
		width: 35%;
		height: 100%;
	}

	.swiper-right {
		width: 63%;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.swiper-right-top,
		.swiper-right-botoom {
			width: 100%;
			height: 230px;
		}
	}
}

.choes {
	background-color: #3298FD;
	color: #ffffff;

	.current {
		font-size: 10px;
		display: inherit;
		color: #ffffff;
	}

}

.choes1 {
	background-color: #E8F3FF;
	color: #3298FD;

	.current {
		display: none;
	}
}

.custom-choose {
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* .ones {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		background: rgba(0, 0, 0, .4);
	} */

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>